<!DOCTYPE html>
<html lang="en" xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div id="a" style="padding-bottom: 200px">
    <h3>组件插槽</h3>
    <test val="xxx">
        test
       <template v-slot:sl>自定义的s1的内容1</template>
    </test>
    <hr>
    <test val="xxx">
        <template #sl>自定义的s1的内容2</template>
    </test>
    <hr>
    <test val="xxx">
        <template slot="s1">自定义的s1的内容3</template>
    </test>
    <hr>
</div>
<script>
    Vue.component("test",{
        props : ["val"],
        template : `
            <div>
                 <h4>插槽前</h4>
                 <slot>默认插槽</slot>
                 <slot name="s1">具名插槽 s1</slot>
                 <h4>插槽后</h4>
            </div>
        `,
    })
    var v = new Vue({
        el : "#a",
        data : {

        }
    })
</script>
</body>
</html>